<template>
  <Card>
    <div slot="title">
      <Icon type="ios-grid" size="16" class="mr-1" />
      功能导航
    </div>
    <div class="nav-grid">
      <div class="nav-item" @click="handleNav('profile')">
        <Icon type="ios-person" size="24" />
        <span>个人资料</span>
      </div>
      <div class="nav-item" @click="handleNav('diet')">
        <Icon type="ios-cutlery" size="24" />
        <span>饮食管理</span>
      </div>
      <div class="nav-item" @click="handleNav('exercise')">
        <Icon type="ios-bicycle" size="24" />
        <span>运动管理</span>
      </div>
      <div class="nav-item" @click="handleNav('social')">
        <Icon type="ios-people" size="24" />
        <span>社交中心</span>
      </div>
      <div class="nav-item" @click="handleNav('settings')">
        <Icon type="ios-cog" size="24" />
        <span>设置</span>
      </div>
    </div>
  </Card>
</template>

<script>
export default {
  name: 'FeatureNav',
  methods: {
    handleNav (type) { // 修正：括号前加空格
      // 这里可以通过路由跳转或调用store action
      this.$Message.info(`即将跳转到${this.getNavName(type)}`)
      // 示例：this.$router.push(`/health/${type}`)
    },
    getNavName (type) { // 修正：括号前加空格
      const names = {
        profile: '个人资料',
        diet: '饮食管理',
        exercise: '运动管理',
        social: '社交中心',
        settings: '设置'
      }
      return names[type]
    }
  }
}
</script>

<style lang="less" scoped>
.nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-top: 10px;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  border-radius: 6px;
  background: #f2f3f5;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background: #e5e6eb;
  }
  Icon {
    color: #2d8cf0;
    margin-bottom: 5px;
  }
  span {
    font-size: 12px;
    color: #1f2d3d;
  }
}
</style>
